<template>
  <div class="box">
    <h3>博客</h3>
    <hr>
    <div class="top"><input type="text" placeholder="搜索" class="search"> <input type="date" placeholder="日期"
        class="box-date"> <button>搜索</button> 
        <button>添加</button></div>
    <div class="content" v-for="item in data" :key="item.id">

      <div class="content-ul">
        <ul>
          <li>{{ item.blogName }}</li>
          <li>{{ itemblog }}</li>
          <hr>
          <li v-for="label in item.blogLabel">{{ label }}</li>
        </ul>
      </div>
    </div>
    <div class="down">
      <ul class="down-ul">
        <li class="dowm-li li-arrow"><</li>
        <li v-for="item in getDataLength" class="getDataLength-num dowm-li">{{ item }}</li>
        <li class="dowm-li li-arrow">></li>
      </ul>

    </div>
  </div>

</template>
<script setup>
import { data } from '../router/Blog.js'
import { ref } from "vue"

let getData = ref([])
let getDataLength = ref([])
getData = data
// 分页的数量
getDataLength = data.length / 2
//  添加第一个随机颜色和大小
let liOne=document.querySelector('.content-ul ul li:first-child')
console.log(liOne);

const randomColor=function () {
  let color1=Math.floor(Math.random(1,256))
  let color2=Math.floor(Math.random(1,256))
  let color3=Math.floor(Math.random(1,256))
  return rgb(color1,color2,color3);
}




</script>
<style>
.search {
  width: 420px;
  height: 20px;
  border-radius: 4px;
}

.content-ul {
  background-color: rgb(236, 236, 223);
  margin-top: 5px;
  border: 1px dashed black;
  width: 750px;
  height: 175px;
}

.top>button {
  background-color: rgb(218, 112, 147);
  border-radius: 5px;
  color: white
}

li {
  list-style: none;
}

.dowm-li {
  background-color: rgb(245, 245, 245);
  float: left;

}

.getDataLength-num {
  margin-left: 3px;
  margin-right: 3px;
  width: 22px;
  height: 25px;
  text-align: center;
}

.li-arrow {
  width: 55px;
  height: 25px;
  text-align: center;
}
</style>